
<script setup lang="ts" type="module">
import {
  ref,
  onMounted,
  watch,
  reactive,
  onUpdated,
  toRefs,
  toRef,
  Ref,
  defineEmits
} from "vue";
import { useRouter, RouterView } from "vue-router";
import { ElMessage } from "element-plus";
import { forgetPassword, getCode } from "@/apis/http";
import LoginForm from "./components/loginfrom.vue";
import { Login } from "@/apis/interface";
import type { ElForm } from "element-plus";
import i18n from "@/lang/index";
import { fa } from "element-plus/es/locale";
const emit = defineEmits(['getSomething'])
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
 
});

const loading = ref(false);
const loginForm = reactive<Login.setPassword>({
  username: "",
		tel :"",
		verificationCode: "",
		password: "",
		password4Check: "",
		key: "",  // username: "client123",
    type:2
});
const time=ref(60)
const flag=ref(false)
function submit() {
  var reg=/^[a-zA-Z][a-zA-Z0-9]{7,15}$/
  if(!loginForm.username)return ElMessage.error('请输入账号')
  else if(loginForm.username&&!reg.test(loginForm.username))  return ElMessage.error("账号格式不正确！请输入8~16位，字母开头");
  else if(!loginForm.tel)return ElMessage.error('请输入手机号')
  else if(!loginForm.verificationCode)return ElMessage.error('请输入验证码')
  else if(!loginForm.password)return ElMessage.error('请输入新密码')
  else if(loginForm.password&&!reg.test(loginForm.password))  return ElMessage.error("密码格式不正确！请输入8~16位，字母开头");
  else if(!loginForm.password4Check)return ElMessage.error('请再次输入密码')
  else if(loginForm.password4Check!=loginForm.password) return ElMessage.error('新密码与确认密码不一致')
  else{
    // loginForm.languagetype=i18n.global.locale.value
    // context.emit('getSomething',something)
   
    forgetPassword(loginForm).then((res:any)=>{
      console.log(res)
      if(res.code==0){
        ElMessage.success('重置成功')
        emit('getSomething',false)
      }else{
        ElMessage.error(res.msg_cn)
      }
      
  })
  }
  // isPassword.value=!isPassword.value
}
function getPhoneCode(){  
  getCode(loginForm).then((res:any)=>{
    if(res.code==0){
     var timeCode=setInterval(()=>{
      flag.value=true
      time.value--
      if(time.value<=0){
        flag.value=false
        time.value=60
        clearInterval(timeCode)
      }
     },1000)
      ElMessage.success(res.msg_cn)
    }else{
      ElMessage.error(res.msg_cn)
    }
    
  })
 
}
</script>

<template>
   <div style="margin-top: -60px;" class="logo-text">更换密码</div>
  <el-form
    ref="loginFormRef"
    :model="loginForm"
    :rules="loginRules"
    size="large"
    
  >
    <el-form-item prop="username">
      <div class="user-insert">你的账号</div>
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <div class="user-insert">注册手机号</div>
      <el-input
        v-model="loginForm.tel"
      
      ></el-input>
    </el-form-item>
    <el-form-item>
      <div class="user-insert">验证码</div>
      <div class="Verification">
        <el-input type="input" v-model="loginForm.verificationCode"></el-input>
        <!-- <img :src="img" @click="getCode"/> -->
        <el-button v-if="flag">{{time+'s'}}</el-button>
        <el-button v-else @click="getPhoneCode" >获取短信验证码</el-button>
      </div>
    </el-form-item>

    <el-form-item prop="password">
      <div class="user-insert">新密码</div>
      <el-input
        type="password"
        v-model="loginForm.password"
        show-password
        autocomplete="new-password"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <div class="user-insert">再次输入新密码</div>
      <el-input
        type="password"
        v-model="loginForm.password4Check"
        show-password
        autocomplete="new-password"
      ></el-input>
    </el-form-item>
  </el-form>
  <div class="login-btn">
    <el-button size="large" type="primary" @click="submit">重置密码</el-button>
  </div>
</template>

<style lang="scss" scoped>
@import "../index.scss";
</style>
